<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>menu list</title>

<!-- jquery -->
<script
	src="${pageContext.request.contextPath}/plugin/js/jquery-3.2.1.min.js"></script>
<script
	src="${pageContext.request.contextPath}/plugin/js/jquery.treetable.js"></script>

<script
	src="${pageContext.request.contextPath}/plugin/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script
	src="${pageContext.request.contextPath}/plugin/js/bootstrap-table.min.js"></script>


<!-- 引入bootstrap样式 -->
<link
	href="${pageContext.request.contextPath}/plugin/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/plugin/css/jquery.treetable.css"
	rel="stylesheet">
	<link
	href="${pageContext.request.contextPath}/plugin/css/jquery.treetable.theme.default.css"
	rel="stylesheet">
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$
								.ajax({
									type : 'POST',
									url : '${pageContext.request.contextPath}/menus',
									dataType : "json",
									success : function(data) {
										console.log(data.data);
										$
												.each(
														data.data,
														function(i, item) {
															$("#treeTable")
																	.append(
																			"<tr data-tt-id=\"" + item.nodeId + "\" data-tt-parent-id=\"" + item.nodeParentId + "\">"
																					+ "<td>"
																					+ item.nodeName
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeDescription
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeUrl
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeIcon
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeParentId
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeCreatedEmployeeId
																					+ "</td>"
																					+ "<td>"
																					+ item.nodeCreatedTime
																					+ "</td>"
																					+"<td><button id=\"" + item.nodeId + "\">修改</button><button id=\"" + item.nodeId + "\">删除</button></td></tr>");
														});
										$("#treeTable").treetable({
											expandable : true,
											initialState : "expanded",
											//expandable : true
											clickableNodeNames : true,//点击节点名称也打开子节点.
											indent : 30
										//每个分支缩进的像素数。

										});
									}
								});

					});
</script>
</head>
<body>
	<table id="treeTable" style="width: 1000px">
		<thead>
			<tr>
				<th>菜单名称</th>
				<th>菜单描述</th>
				<th>菜单链接</th>
				<th>菜单图标</th>
				<th>父级菜单</th>
				<th>创建人名</th>
				<th>创建日期</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tableTbody">
		</tbody>
	</table>

</body>
</html>